﻿@page "/components/icons"

@using System.Reflection

<DocsPage>
    <DocsPageHeader Title="Icons" Component="@nameof(MudIcon)" SubTitle="Guidance and suggestions for using icons with MudBlazor.">
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Icons">
                <Description>
                    See the full list of all icons that comes preloaded here: <MudLink Href="/features/icons">MudBlazor Icons</MudLink>
                </Description>
            </SectionHeader>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>The MudIcon component shows the specified icon with the chosen style. You can use the <CodeInline>Title</CodeInline> attribute to improve accessibility with screen readers and show a tooltip on hover.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(IconsUsageExample)">
                <IconsUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color">
            </SectionHeader>
            <SectionContent Code="@nameof(IconsColorExample)">
                <IconsColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Size">
            </SectionHeader>
            <SectionContent Code="@nameof(IconsSizeExample)">
                <IconsSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Material Variants">
                <Description>Material icons that comes loaded with MudBlazor by default is available in Filled, Outlined, Rounded, Sharp and TwoToned.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(IconsMaterialVariantsExample)">
                <IconsMaterialVariantsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Font Icons">
                <Description>
                    MudIcon also supports icon fonts. It supports class-based font icons such as <MudLink Color="Color.Secondary" Href="https://fontawesome.com/">Font Awesome</MudLink>
                    and text-based icon fonts such as <MudLink Color="Color.Secondary" Href="https://fonts.google.com/icons">Material Symbols</MudLink>. <CodeInline Tag>MudIcon</CodeInline> uses different syntax to 
                    distinguish them as explained below. If you don't know the type of your font icon library just try out which syntax works.
                    <br />
                    <MudAlert Class="mt-3" Severity="Severity.Info">
                    Note: you can use font icons also in other components such as <CodeInline Tag>MudIconButton</CodeInline>, <CodeInline Tag>MudButton</CodeInline> and many more.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="CSS Class-Based Font Icons">
                        <Description>Most font icon libraries such as <MudLink Color="Color.Secondary" Href="https://fontawesome.com/">Font Awesome</MudLink> use two CSS classes for each icon. Pass these to the 
                            <CodeInline>Icon</CodeInline> parameter using the syntax <CodeInline>icon-font-class icon-class</CodeInline>.</Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(IconsFontAwesomeExample)">
                        <IconsFontAwesomeExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Text-Based Font Icons">
                        <Description>
                            Some icon libraries such as <MudLink Color="Color.Secondary" Href="https://fonts.google.com/icons">Material Symbols</MudLink> use the inner text of an HTML element to determine which icon to display. 
                            <CodeInline>MudIcon</CodeInline> supports these also via the syntax <CodeInline>icon-font-class/icon-name</CodeInline> 
                        </Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(IconsFontMaterialSymbolsSyntaxExample)">
                        <IconsFontMaterialSymbolsSyntaxExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom SVG Icons">
                <Description>
                    The icon parameter of <CodeInline Tag="true">MudIcon</CodeInline>, <CodeInline Tag="true">MudButton</CodeInline> and other components are just SVG strings. 
                    So changing an icon programmatically is as easy as assigning a new string.<br />
                    Also, if the icon you need is not available in <MudLink Href="/features/icons">MudBlazor's icon library</MudLink> you can just assign your own SVG. 
                    The cube icon in this example is <CodeInline>cube-outline</CodeInline> from <MudLink Color="Color.Secondary" Href="https://materialdesignicons.com" Style="white-space:nowrap;">Material Design Icons</MudLink>.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ChangeIconProgrammaticallyExample)">
                <ChangeIconProgrammaticallyExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
